<template>
	<view class="cencon">
		<!-- <view class="header_left" @tap="hui" ><image  src="/static/left2.png"  class="left_img"/></view>
		<view class="header">期权明细</view>
		<view class="header-fu" @tap="zhuan">转让</view>
		<view class="tiao"></view> -->
		<view class="tou">
			<view class="row" v-for="(row,index) in couponValidList" :key="index">
				<view class="one">
					<view class="title">
						{{row.compony}}
					</view>
					<view class="term">
						{{row.title}}
					</view>
				</view>
				<view class="jifen">
					<view style="float: left;"><view v-if="row.before > row.after">-</view><view v-else>+</view></view>
					<view style="float: left;">{{row.option}}</view>
					<view style="width: 100%;line-height: 50%;font-size: 26upx;text-align: center;">
						{{arr[index]}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				couponValidList: [{
						id: 1,
						title: "转让期权成功，扣除期权",
						termStart: "2019-04-01 22:22:22",
						jifen: '-20'
					},
					
				],
				headerTop: 0,
				//控制滑动效果
				typeClass: 'valid',
				subState: '',
				theIndex: null,
				oldIndex: null
			}
		},
		onPageScroll(e) {

		},
		onLoad() {
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/mem_optionlist',
				header:{authtoken:this.$store.state.token},
				method:'POST',
				success:(res)=>{
					console.log("请求成功",res)
					this.couponValidList=res.data.data
					for (let i = 0; i < res.data.data.length; i++) {
							this.arr.push(this.time(res.data.data[i].updatetime));
					}
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		methods: {
			time(ytime){
				var date = new Date(ytime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				let timeer = Y + M + D  ;
				return timeer
			},
			hui:function(){ 
				console.log("你点了")
				uni.navigateTo({
					url:"../My_options/index"
				})
			},
			zhuan:function(){
				console.log("你点了")
				uni.navigateTo({
					url:'../Option_Transfer/Option_Transfer'
				})
			},
			switchType(type) {
				if (this.typeClass == type) {
					return;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.typeClass = type;
				this.subState = this.typeClass == '' ? '' : 'show' + type;
				setTimeout(() => {
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass == 'valid' ? '' : this.subState;
				}, 200)
			},
			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},
		}
	}
</script>

<style>
	.cencon {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		box-sizing: border-box;
	}
	.header_left{
		width: 60upx;
		height: 60upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(102, 102, 102, 1);
		position: absolute;
		top: 61upx;
		left: 20upx;
	}
	.left_img{
		width: 20upx;
		height: 40upx;
	}
	.header {
		text-align: center;
		font-size: 35upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(87, 87, 87, 1);
		position: absolute;
		top: 61upx;
		left: 306upx;
	}
	.header-fu {
		font-size: 28upx;
		width: 60upx;
		height:50upx ;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(102, 102, 102, 1);
		position: absolute;
		top: 61upx;
		left: 603upx;
	}
	.tiao {
		width: 100%;
		margin-top: 50upx;
		height: 1upx;
		background: #E6E6E6;
		box-sizing: border-box;
	}
	.tou {
		padding-top:10upx;
	}
	.one {
		float: left;
	}
	.row {
		width: 100%;
		height: 143upx;
		background: #FFFFFF;
		margin-top: 2upx;
		border-bottom-width: 1upx;
		border-bottom-style: solid;
		border-bottom-color:#EDEDED;
	}
	.title {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(41, 41, 41, 1);
		padding-left: 30upx;
		padding-top: 30upx;
	}
	.term {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(127, 127, 127, 1);
		padding-left: 30upx;
		padding-top: 1upx;
	}
	.jifen {
		font-size: 41upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(51, 51, 51, 1);
		padding-right: 30upx;
		padding-top: 43upx;
		float: right;
	}
</style>
